<template>
    <div id="banner"  style="width:100%;height:90%">
      <el-carousel :interval="9000" :height="bannerHeight + 'px'"   style="width:100%;height:100%"  @change="handlechange" >
        <el-carousel-item v-for="item in img_list" :key="item.id" :value="item.id"   >
          <img :src="item.url" :id="item.id" name='zmd' >
        </el-carousel-item>
      </el-carousel>
     <div style="width:100%">
            <table  style="width:100%">
                <tr>
                    <td style="width:9%">拍摄人员</td>
                    <td> <el-input v-model="data.people" :disabled="true"></el-input></td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <td style="width:9%">拍摄时间</td>
                    <td><el-input v-model="data.people" :disabled="true"></el-input></td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <td style="width:9%">拍摄位置</td>
                    <td><el-input v-model="data.people" :disabled="true"></el-input></td>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <td style="width:9%">拍摄角度</td>
                    <td><el-input v-model="data.people" :disabled="true" ></el-input></td>
                </tr>
            </table>
        </div>
    </div>
</template>
 
<script>

    export default {
        name: "Banner",
        data(){
          return{
            data:{
              people:''
            },
            // 图片地址数组
            // img_list:[
            //   "https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163",
            //   "https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163",
            //   "https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163",
            //   "https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163",
            //   "https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163"
            // ],
            img_list:[
              {
                id:'3',
                url:"https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163"
              },
              {
                id:'2',
                url:"https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163"
              },
              {
                id:'6',
                url:"https://jockers.oss-cn-beijing.aliyuncs.com/069f8b86ab874c2aa065a7db737d2163"
              },
            ],
            // 图片父容器高度
            bannerHeight :1000,
            // 浏览器宽度
            screenWidth :0,
          }
        },
        methods:{
          setSize:function () {
            // 通过浏览器宽度(图片宽度)计算高度
            this.bannerHeight = 400 / 1920 * this.screenWidth;
          },
          handlechange(val){
             var id = $('[name=zmd]');
            //  console.log($(id[val]).attr('id'))
          }
        },
      mounted() {
          // 首次加载时,需要调用一次
          this.screenWidth =  window.innerWidth;
          this.setSize();
          // 窗口大小发生改变时,调用一次
          window.onresize = () =>{
          this.screenWidth =  window.innerWidth;
          this.setSize();
        }
      }
    }
</script>
 
<style >
  .el-carousel__container{
    height: 100% !important;
  }
 
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
 
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  img{
    /*设置图片宽度和浏览器宽度一致*/
    width: 100%;
    height: inherit;
  }
</style>